<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令</title>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 条件判断指令 -->
			<div v-if="count == 1">div1</div>
			<!-- <div v-if="count == 3">div2</div> -->
			<div v-else-if="count == 2">div2</div>
			<div v-else>div3</div>

			<!-- v-show是切换display:none来显示和隐藏的,而v-if条件不满足时直接就不渲染 -->
			<div v-show="count == 1">v-show</div>

			<input type="text" v-model="count" />
		</div>

		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						count: 1
					}
				}
			});
		</script>
	</body>
</html>
